<template>
  <el-row :gutter="5">
    <el-col :span="3">
      <div class="grid-content bg-purple">
        <el-card>
          网站分类
        </el-card>
      </div>
      <div class="grid-content bg-purple">
        <ranking-view-card></ranking-view-card>
      </div>
    </el-col>
    <el-col :span="18">
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="最新书籍" name="first">
            <book-view-crad :data="bookData"></book-view-crad>
            <el-pagination
              style="margin-top:15px;"
              background
              layout="prev, pager, next"
              :total="1000"
            ></el-pagination>
          </el-tab-pane>
          <el-tab-pane label="最热书籍" name="second">最热书籍</el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
    <el-col :span="3">
      <div class="grid-content bg-purple">
        <el-card>
          用户信息
        </el-card>
        <user-info-card></user-info-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import BookViewCrad from "../../components/component/book-view-card.vue";
import RankingViewCard from "../../components/component/ranking-view-card.vue";
import UserInfoCard from "../../components/component/user-info-card.vue";
export default {
  name: "index",
  components: {
    BookViewCrad,
    RankingViewCard,
    UserInfoCard
  },
  data() {
    return {
      activeName: "first",
      bookData: [
        {
          id: "1",
          pubDate: "2016-05-02",
          author: "金庸",
          press: "中信出版社",
          booName: "笑傲江湖",
          info:
            "令狐冲，是金庸武侠小说《笑傲江湖》的男主角。由华山派掌门，君 子剑岳不群抚养长大，传授武功，为华山派大弟子，后成为恒山派掌门。"
        },
        {
          id: "2",
          pubDate: "2016-05-02",
          author: "金庸",
          press: "中信出版社",
          booName: "笑傲江湖",
          info:
            "令狐冲，是金庸武侠小说《笑傲江湖》的男主角。由华山派掌门，君 子剑岳不群抚养长大，传授武功，为华山派大弟子，后成为恒山派掌门。"
        },
        {
          id: "3",
          pubDate: "2016-05-02",
          author: "金庸",
          press: "中信出版社",
          booName: "笑傲江湖",
          info:
            "令狐冲，是金庸武侠小说《笑傲江湖》的男主角。由华山派掌门，君 子剑岳不群抚养长大，传授武功，为华山派大弟子，后成为恒山派掌门。"
        },
        {
          id: "4",
          pubDate: "2016-05-02",
          author: "金庸",
          press: "中信出版社",
          booName: "笑傲江湖",
          info:
            "令狐冲，是金庸武侠小说《笑傲江湖》的男主角。由华山派掌门，君 子剑岳不群抚养长大，传授武功，为华山派大弟子，后成为恒山派掌门。"
        },
        {
          id: "5",
          pubDate: "2016-05-02",
          author: "金庸",
          press: "中信出版社",
          booName: "笑傲江湖",
          info:
            "令狐冲，是金庸武侠小说《笑傲江湖》的男主角。由华山派掌门，君 子剑岳不群抚养长大，传授武功，为华山派大弟子，后成为恒山派掌门。"
        },
        {
          id: "6",
          pubDate: "2016-05-02",
          author: "金庸",
          press: "中信出版社",
          booName: "笑傲江湖",
          info:
            "令狐冲，是金庸武侠小说《笑傲江湖》的男主角。由华山派掌门，君 子剑岳不群抚养长大，传授武功，为华山派大弟子，后成为恒山派掌门。"
        },
        {
          id: "7",
          pubDate: "2016-05-02",
          author: "金庸",
          press: "中信出版社",
          booName: "笑傲江湖",
          info:
            "令狐冲，是金庸武侠小说《笑傲江湖》的男主角。由华山派掌门，君 子剑岳不群抚养长大，传授武功，为华山派大弟子，后成为恒山派掌门。"
        },
        {
          id: "8",
          pubDate: "2016-05-02",
          author: "金庸",
          press: "中信出版社",
          booName: "笑傲江湖",
          info:
            "令狐冲，是金庸武侠小说《笑傲江湖》的男主角。由华山派掌门，君 子剑岳不群抚养长大，传授武功，为华山派大弟子，后成为恒山派掌门。"
        }
      ]
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      // this.$api.get('http://localhost:3000/users/book',{},response =>{
      //   console.log(response)
      // })
      // var Mock = require("mockjs");
      // var data = Mock.mock({
      //   "array|1-10": [
      //     {
      //       "id|+1": ["Hello", "Mock.js", "!"],
      //       "pubDate|+1": ["Hello", "Mock.js", "!"],
      //       "author|+1": ["Hello", "Mock.js", "!"],
      //       "booName|+1": ["Hello", "Mock.js", "!"],
      //       "info|+1": ["Hello", "Mock.js", "!"],
      //       "press|+1": ["Hello", "Mock.js", "!"],
      //     }
      //   ]
      // });
      // this.bookData = data.array
      console.log(this.bookData)
    },
    handleEdit(index, row) {
      // console.log(index, row)
    },
    handleDelete(index, row) {
      // console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
